<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .header,
        .footer {
            width: 1200px;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 120px;
            color: #fff;
        }

        .footer {
            height: 300px;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            height: 300px;
            display: block;
        }

        .pagination {
            width: 1200px;
            margin: 10px auto;
            height: 50px;
            display: flex;
            align-items: center;
        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 24px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }

        .pagination>.total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        .pagination>select {
            font-size: 22px;
            padding-left: 20px;
            margin-left: 30px;
        }

        .loading{
            width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        .loading>img{
            height:100px;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <ul>

    </ul>
    <div class="loading">
        <img src="https://img.zcool.cn/community/017f365d157e1ea8012051cd848a88.gif" alt="">
    </div>
    <div class="footer">网页底部</div>
   
    <script src="./data.js"></script>

    <script>
        var current = 1; // 第几页 当前的页数
        var pagesize = 4; // 每页显示的条数
        var total = list.length; //总数据条数
        var contentEle = document.querySelector('ul');
        var totalpage = Math.ceil(total / pagesize); //总页数 
        var loadingEle = document.getElementsByClassName('loading')[0];
        function bindHTML() {
            // 从总数据中截取第几页的数据 然后再渲染 
            var pagedata = list.slice((current - 1) * pagesize, current * pagesize);
            // 拼接成 `<li></li><li></li><li></li><li></li><li></li>`
            // 然后赋值到ul中
            contentEle.innerHTML += pagedata.reduce(function (prev, item) {
                return prev + `
                                <li>
                            <img src="${item.pic}" alt="" width="278" height="278">
                            <p>${item.name}</p>
                            <p>价格:${item.price}</p>
                            <p>城市:${item.city}</p>
                            <p>地址:${item.address}</p>
                            <p>时间:${item.showTime}</p>
                        </li>`
            }, '');
        }

        //打开页面调用函数 
        bindHTML();


        // 浏览器卷取的高度+浏览器可视化窗口的高度 > 元素的尺寸高度+相对于定位父级的高度 
        // 达到加载下一页的条件 





        // scroll 事件   
        // 滚动条滚动  判断 是否加载新内容 
        var flag = true; // 定一个开关  默认开启
        //如果开关是开着的 加载下一页
        window.onscroll = function () {
            if(current == totalpage) return; //当页数为总页数 说明没有下一页了 
            // 停止加载下一个
            
             
            // 说明 不需要去加载下一页
            // 浏览器 卷取的高度
            var scroll_top = document.documentElement.scrollTop || document.body.scrollTop

            // 浏览器可视窗口的高度  
            var browser_height = window.innerHeight;
            // 元素的尺寸高度 
            var eleHeight = contentEle.offsetHeight;

            // 定位父级的高度 
            var pHeight = contentEle.offsetTop;

            // 加载下一页的条件  
           if(scroll_top+browser_height <= eleHeight+pHeight) return;
           
           if(flag === false) return; // 开关是否是关闭 如果是关闭的


           // 走到这个位置 说明我开始加载下一页
            console.log('滚动到这里满足条件') // 开始去加载下一页
            loadingEle.style.display = 'flex';
            //同一时刻 只能执行一个定时器  
            flag = false; // 开关关上 这时候其它定时器不能执行了  





           // 滚动条触发很敏感    稍微一动就会触发一个函数 
           // 目标是每次加载一页  现在的情况是 一不小心出来太多页 
           // 这里用定时器 模拟 加载下一页   
           // 多长时间以后再执行  而不是一下子就出来好多  

           setTimeout(function(){
                // 运动条一滚动  触发了很多次事件 
                // 相当于好多次事件同时执行了 也就是很多个定时器 
                // 每个定时器 页码+1 导致 全部加载完成了 


                // 为了保证 每次加载一页 
                // 当一个定时器被执行  其它定时器等着  
                // 页面加载完了 然后通知下个定时器 去加载下一页 
                current++;
                bindHTML();
                loadingEle.style.display = 'none';
                flag = true; // 变成true 
           },Math.floor(Math.random()*3000+2000));


        }



    </script>
</body>

</html>